<template>
  <div class="wrapper">
    <div>
      <p>插槽内容(Slot Content)</p>
      <kaifamiao-button>新增</kaifamiao-button>
      <kaifamiao-button>删除</kaifamiao-button>
      <kaifamiao-button>修改</kaifamiao-button>
      <kaifamiao-button>查询</kaifamiao-button>
    </div>

    <div>
      <p>渲染作用域(Render Scope)</p>
      <kaifamiao-button>
        删除"{{ bookName }}"
      </kaifamiao-button>
    </div>

    <div>
      <p>备用内容(Fallback Content)</p>
      <submit-button>注册</submit-button>
      <submit-button>登录</submit-button>
      <submit-button></submit-button>
    </div>

    <div>
      <p>具名插槽(Named Slots)</p>
      <layout>
        <!-- 为具名插槽分发内容时需要使用 v-slot 指令指定插槽名称 -->
        <template v-slot:header>
          <h1>Here might be a page title</h1>
        </template>

        <template v-slot:default>
          <p>A paragraph for the main content.</p>
          <p>And another one.</p>
        </template>

        <!-- 可以将 v-slot:slot-name 缩写为 #slot-name -->
        <template #container-footer>
          <p>Here's some contact info</p>
        </template>
      </layout>
    </div>

    <div>
      <p>作用域插槽(Scoped Slots)</p>
      <todo-list>
        <!-- 通过 v-slot:slot-name 来将包含所有 "slot prop" (插槽prop) 的对象命名为 sp  -->
        <template  v-slot:default="sp">
          <!-- 访问在子组件中通过 slot 的属性绑定的值 -->
          <b>{{sp.serial}}</b>
          <span>{{sp.task}}</span>
        </template>
      </todo-list>
    </div>

    <div>
      <p>作用域插槽(Scoped Slots)</p>
      <cart></cart>
      <hr>
      <cart>
        <!-- 在 cart 组件中通过 作用域插槽 向子组件分发内容 -->
        <!-- 注意，这里的 v-slot="sp" 等同于 v-slot:defalut="sp" -->
        <template v-slot="sp">
          <span class="item">
            <img :src="sp.item.imgUrl" class="image">
            <div class="name">{{sp.item.name}}</div>
          </span>
          <span class="price">
            <div>
              <span>原价:</span> <span>{{sp.item.price}}</span>
            </div>
            <div>
              <span>折扣:</span> <span>{{ ( sp.item.discount * 10 ).toFixed(2) }}</span>
            </div>
            <div>
              <span>折扣价:</span> <span>{{ ( sp.item.price * sp.item.discount ).toFixed(2) }}</span>
            </div>
          </span>
          <span>{{ sp.item.number }}</span>
          <span>{{ ( sp.item.price * sp.item.discount * sp.item.number ).toFixed(2) }}</span>
        </template>
      </cart>
    </div>

    <div>
      <p>作用域插槽(Scoped Slots): 解构 "slot props" 对象( 即将包含了所有"插槽Prop"的对象结构)</p>
      <todo-list>
        <!-- 结构 "slot props" 对象  -->
        <template  v-slot:default="{serial,task}">
          <b>{{serial}}</b>
          <span>{{task}}</span>
        </template>
      </todo-list>
      <hr>
      <cart>
        <!-- 结构 "slot props" 对象  -->
        <template v-slot="{ item }">
          <span class="item">
            <img :src="item.imgUrl" class="image">
            <div class="name">{{item.name}}</div>
          </span>
          <span class="price">
            <div>
              <span>原价:</span> <span>{{item.price}}</span>
            </div>
            <div>
              <span>折扣:</span> <span>{{ ( item.discount * 10 ).toFixed(2) }}</span>
            </div>
            <div>
              <span>折扣价:</span> <span>{{ ( item.price * item.discount ).toFixed(2) }}</span>
            </div>
          </span>
          <span>{{ item.number }}</span>
          <span>{{ ( item.price * item.discount * item.number ).toFixed(2) }}</span>
        </template>
      </cart>
    </div>

    <div>
      <p>动态插槽名(Dynamic Slot Names)</p>
      <div>
        <input type="radio" v-model="slotName" value="header">header
        <input type="radio" v-model="slotName" value="default">main
        <input type="radio" v-model="slotName" value="container-footer">footer
      </div>
      <layout>
        <template v-slot:[slotName]>
          期望疫情早日结束
        </template>
      </layout>
    </div>

  </div>
</template>

<script>
// 注意这里的 @ 表示 src 目录
import KaifamiaoButton from '@/components/KaifamiaoButton.vue' ;
import SubmitButton from '@/components/SubmitButton.vue' ;
import Layout from '@/components/Layout.vue';
import TodoList from '@/components/TodoList.vue';
import Cart from '@/components/Cart.vue' ;

export default {
  name: 'App',
  // 局部注册
  components: {
    'kaifamiao-button': KaifamiaoButton ,
    'submit-button': SubmitButton ,
    'layout': Layout ,
    'todo-list': TodoList,
    'cart': Cart
  },
  data(){
    return {
      bookName: 'Vue从入门到放弃',
      slotName: 'default'
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 90% ;
  margin: auto ;
}
.wrapper>div {
  border: 1px solid #6677FF ;
  margin: 15px auto;
}
p {
  margin: 0 ;
  line-height:30px ;
  background: #f1f1f1;
}

.item {
  text-align: center ;
}

.image {
  width: 100px;
}

.name {
  text-align: center;
  font-size: 14px ;
}

.price>div {
  display: flex ;
  justify-content: space-between;
}

.price div>span {
  flex-basis: 95px ;
}
.price div>span:first-child {
  text-align: right ;
}
.price div>span:last-child {
  text-align: left ;
}

.price>div:first-child span:last-child {
  text-decoration: line-through ;
}
</style>
